<template>
  <div class="flow">
    <div class="formLook" :class="{ 'full-width': isFullWidth }">
      <TitleComponent title="用人需求申请"  />
      <!-- 需求信息 -->
      <div class="needNotes" style="margin-top: 10px">
        <div class="title_line">
          <div class="title_img">
            <img src="@/assets//images/demand.png" alt="" />
          </div>
          <p class="title">需求信息</p>
        </div>
        <div>
          <el-form
            ref="neekWorksFormOne"
            :model="neekWorksForm"
            label-width="150px"
            class="demo-neekWorksForm"
            :size="formSize"
            status-icon
            label-position="right"
          >
            <el-form-item label="岗位需求描述:" prop="requireJobOverview">
              <el-input
                :disabled="true"
                placeholder="请输入岗位需求描述"
                v-model="neekWorksForm.requireJobOverview"
              />
            </el-form-item>

            <el-form-item label="需求申请人:" prop="requireProposerId">
              <el-select
                :disabled="true"
                v-model="neekWorksForm.requireProposerId"
                clearable
                placeholder="请选择需求申请人"
                style="width: 100% !important"
              >
                <el-option
                  v-for="item in requireProposerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="需求部门:" prop="requireDeptId">
              <el-select
                :disabled="true"
                v-model="neekWorksForm.requireDeptId"
                clearable
                placeholder="请选择需求部门"
                style="width: 100%"
              >
                <el-option
                  v-for="item in buIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="申请时间:" prop="proposeTime">
              <el-date-picker
                v-model="neekWorksForm.proposeTime"
                :disabled="true"
                type="date"
                placeholder="年/月/日"
              />
            </el-form-item>

            <el-form-item label="HR:" prop="hrId">
              <el-select
                v-model="neekWorksForm.hrId"
                :disabled="true"
                clearable
                placeholder="请选择HR"
                style="width: 100%"
              >
                <el-option
                  v-for="item in hrNameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 岗位信息 -->
      <div class="needNotesJob">
        <div class="title_lineJob">
          <div>
            <div class="title_line">
              <div class="title_img">
                <img src="@/assets//images/demand.png" alt="" />
              </div>
              <p class="title">岗位信息</p>
            </div>
            <!-- 岗位按钮 -->
            <div style="display: flex">
              <div
                v-for="(item, index) in jobIndexList"
                :key="index"
                :class="jobIndex == index ? 'clickjob' : 'noclickjob'"
                style="
                  width: 70px;
                  height: 30px;
                  border-radius: 4px;
                  color: #fff;
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  padding: 0 5px;
                  margin-left: 10px;
                  cursor: pointer;
                "
              >
                <span @click="btnJob(index)">岗位{{ item }}</span>
              </div>
            </div>
          </div>
        </div>
        <el-form
          :ref="'neekWorksFormRef' + jobIndex"
          :model="neekWorksForm.jobPostDetailDtoList[jobIndex]"
          label-width="150px"
          class="demo-neekWorksForm"
          :size="formSize"
          status-icon
          label-position="right"
        >
          <!-- <el-form-item label="从岗位库选择:" prop="name">
            <el-input
              :disabled="true"
              placeholder="从岗位库选择"
              v-model="neekWorksForm.name"
            />
          </el-form-item> -->

          <el-form-item label="岗位名称:" prop="jobName">
            <el-input
              :disabled="true"
              v-model="neekWorksForm.jobPostDetailDtoList[jobIndex].jobName"
              placeholder="请输入岗位名称"
            />
          </el-form-item>

          <el-form-item label="招聘类型:" prop="recruitmentType">
            <el-select
              :disabled="true"
              v-model="
                neekWorksForm.jobPostDetailDtoList[jobIndex].recruitmentType
              "
              clearable
              placeholder="添加招聘类型"
            >
              <el-option
                v-for="item in sys_recruitment_type"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="职级:" prop="positionLevel">
            <el-input
              :disabled="true"
              v-model="
                neekWorksForm.jobPostDetailDtoList[jobIndex].positionLevel
              "
              placeholder="请输入职级"
            />
          </el-form-item>

          <el-form-item label="薪酬范围:" prop="salaryRange">
            <el-input
              :disabled="true"
              v-model="neekWorksForm.jobPostDetailDtoList[jobIndex].salaryRange"
              placeholder="请输入薪酬范围"
            />
          </el-form-item>

          <el-form-item prop="jobResponsibilities">
            <!-- 自定义 label -->
            <template #label>
              <span style="display: flex; align-items: center">
                <span>岗位职责:</span>
                <el-tooltip
                  placement="right"
                  trigger="click"
                  popper-class="successTip"
                >
                  <template #content>
                    <div class="tooltipText">
                      <div class="textOne">已规避岗位不清晰的用工风险！</div>
                      <div class="textTwo">
                        如果用人单位没有制定明确的录用条件，那么很有可能
                      </div>
                      <div class="textTwo">
                        会对日后以“员工在试用期间被证明不符合录用条件”
                      </div>
                      <div class="textTwo">为由解除劳动合同带来麻烦。</div>
                    </div>
                  </template>
                  <img src="@/assets//images/check.png" alt="" />
                </el-tooltip>
              </span>
            </template>

            <!-- 表单项内容 -->
            <el-input
              :disabled="true"
              v-model="
                neekWorksForm.jobPostDetailDtoList[jobIndex].jobResponsibilities
              "
              placeholder="请输入岗位职责"
            />
          </el-form-item>

          <el-form-item label="任职条件" prop="qualification">
            <!-- 自定义 label -->
            <template #label>
              <span style="display: flex; align-items: center">
                <span>任职条件:</span>
                <el-tooltip
                  placement="right"
                  trigger="click"
                  popper-class="successTip"
                >
                  <template #content>
                    <div class="tooltipText">
                      <div class="textTwo">
                        招聘简章或广告中常见的歧视性内容包括：民族歧视、
                      </div>
                      <div class="textTwo">
                        种族歧视、性别歧视、农村劳动者、残疾人和传染病病
                      </div>
                      <div class="textTwo">
                        原携带者等。用人单位在招聘过程中不要在招聘简章或
                      </div>
                      <div class="textTwo">
                        广告中出现法律禁止的相关歧视性内容，用人单位依法
                      </div>
                      <div class="textTwo">
                        享有用人自主权，但应当向劳动者提供平等的就业机会，
                      </div>
                      <div class="textTwo">不要发布歧视性的招聘信息。</div>
                    </div>
                  </template>
                  <img src="@/assets//images/error.png" alt="" />
                </el-tooltip>
              </span>
            </template>
            <el-input
              :disabled="true"
              v-model="
                neekWorksForm.jobPostDetailDtoList[jobIndex].qualification
              "
              placeholder="请输入任职条件"
            />
          </el-form-item>

          <el-form-item label="岗位关键词:" prop="jobKeywords">
            <el-input
              :disabled="true"
              v-model="neekWorksForm.jobPostDetailDtoList[jobIndex].jobKeywords"
              placeholder="请输入岗位关键词"
            />
          </el-form-item>
          <el-form-item label="岗位信息描述文件:" prop="">
            <attachment
              v-if="neekWorksForm.jobPostDetailDtoList[jobIndex].file"
              :employeeResignFileVoList="
                neekWorksForm.jobPostDetailDtoList[jobIndex].file
              "
            ></attachment>
            <span v-else>暂无岗位信息描述文件</span>
          </el-form-item>
          <el-form-item label="需求人数:" prop="requirePersonNumber">
            <el-input
              :disabled="true"
              v-model="
                neekWorksForm.jobPostDetailDtoList[jobIndex].requirePersonNumber
              "
              placeholder="请输入需求人数"
            />
          </el-form-item>
          <el-form-item label="需求紧急程度:" prop="requireEmergencyLevel">
            <div
              class="tags"
              :class="
                tagText.className[
                  Number(
                    neekWorksForm.jobPostDetailDtoList[jobIndex]
                      .requireEmergencyLevel
                  )
                ]
              "
            >
              <el-button
                v-if="false"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex]
                    .requireEmergencyLevel
                "
              ></el-button>
              {{
                tagText.label[
                  Number(
                    neekWorksForm.jobPostDetailDtoList[jobIndex]
                      .requireEmergencyLevel
                  )
                ]
              }}
            </div>
          </el-form-item>
          <el-form-item label="期望到岗日期:" prop="hopeArrivalTime">
            <el-date-picker
              :disabled="true"
              v-model="
                neekWorksForm.jobPostDetailDtoList[jobIndex].hopeArrivalTime
              "
              type="date"
              placeholder="年/月/日"
            />
          </el-form-item>
          <el-form-item label="截止日期:" prop="closeTime">
            <el-date-picker
              :disabled="true"
              v-model="neekWorksForm.jobPostDetailDtoList[jobIndex].closeTime"
              type="date"
              placeholder="年/月/日"
            />
          </el-form-item>
          <el-form-item label="是否是特殊岗位:" prop="name">
            <div v-for="(item, index) in sys_is_special" :key="index">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div
                  v-if="
                    neekWorksForm.jobPostDetailDtoList[jobIndex]
                      .isSpecialPosition == item.value
                  "
                  :class="
                    neekWorksForm.jobPostDetailDtoList[jobIndex]
                      .isSpecialPosition == item.value
                      ? 'radios'
                      : 'noradios'
                  "
                ></div>
                <div
                  v-if="
                    neekWorksForm.jobPostDetailDtoList[jobIndex]
                      .isSpecialPosition == item.value
                  "
                  class="isNo"
                  :class="item.value == '0' ? 'isColor' : 'noColor'"
                >
                  <div>
                    {{ item.label }}
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="flowtab_info" v-if="isFullWidth">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="流程过程" name="流程过程">
          <div class="flowProcess">
            <steps
              :flowableDataList="flowableDataList"
              @submit="handleSubmit"
              @close="handleClose"
              workFlow="1"
              :flowableBtns="flowableBtns"
            >
            </steps>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="流程图">
          <bpmnViewer :flowData="flowDatas" :id="hightlightId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";
import {
  newNeedWorkers,
  seachPersonList,
  needWorkersView,
  approveApi,
} from "@/api/recruitment/needWorkers/index.js";
import {
  flowableTodo,
  flowablePhoto,
  flowableRecord,
} from "@/api/flowableApi/flowableApi.js";
import { formatDate } from "@/utils/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

import attachment from "@/components/attachment.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import bpmnViewer from "@/components/Process/viewer/index.vue";
import { reactive, onMounted, toRef, ref } from "vue";
import useUserStore from "@/store/modules/user.js";
import { computed } from "vue";
import steps from "@/components/step/index.vue";

const query = computed(() => {
  let id = route.query ? Number(route.query.id) : "";
  return { id };
});

const tagText = reactive({
  className: {
    0: "primaryTag",
    1: "warningTag",
    2: "dangerTag",
  },
  label: {
    0: "一般",
    1: "紧急",
    2: "非常紧急",
  },
});

const user = useUserStore().user;

console.log(user, "useruseruser");
const isShow = ref(null);
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const activeName = ref("流程过程");
const formSize = ref("default");
const neekWorksFormOne = ref();
const neekWorksFormRef = ref();
const { sys_recruitment_type, sys_is_special } = proxy.useDict(
  "sys_recruitment_type",
  "sys_is_special"
);

const radio1 = ref(1);
const radio2 = ref(0);

const jobIndexList = ref([1]);
const jobIndex = ref(0);

const buIdOptions = reactive([]);
// 申请人
const requireProposerOptions = reactive([]);
// hr
const hrNameOptions = reactive([]);
// 详情
const neekWorksForm = reactive({
  delflag: 0, //删除标志位默认为0可以不传
  demandJobs: "" /*需求岗位数量 0单个 1多个*/,
  hrId: "", //hr的id
  hrName: "", //hr的名字
  id: "", //用人需求表主键id
  //添加岗位数据
  jobPostDetailDtoList: [
    {
      closeTime: "", //截至日期
      delFlag: 0, //删除标志位1删除 0未删除
      file: "", //文件
      hopeArrivalTime: "", //期望到达日期
      id: "", //岗位信息表主键id
      isSpecialPosition: "0", //是否是特殊岗位
      jobCode: "", //岗位编码
      jobId: "", //岗位id
      jobKeywords: "", //岗位关键词
      jobName: "", //岗位名称
      jobResponsibilities: "", //岗位职责
      positionLevel: "", //职级
      qualification: "", //任职条件
      recruitmentType: "",
      requireEmergencyLevel: "0", //需求紧急程度
      requireJobId: "", //用人需求表主键id
      requirePersonNumber: "", //需求人数
      salaryRange: "", //薪酬范围
      specialJobRequirements: "", //特殊岗位要求
    },
  ],
  processId: "", //流程实例id
  proposeTime: "", //申请日期
  requireDeptId: "", //需求部门id
  requireDeptName: "", //需求部门name
  requireJobOverview: "", //岗位需求概述
  requireProposerCode: "",
  reviewOpinionsList: [],
  requireProposerId: "", //需求申请人id
  requireProposerName: "", //需求申请人name
  status: "", //* 审批状态1草稿 2审批中 1000审批完成 201退回修改
  type: "" /*0保存修改  1提交 */,
});
const flowDatas = ref({});
// 审批意见
const auditOpinion = ref("");
// 留痕数据
const flowableDataList = ref([]);
// 审核按钮
const flowableBtns = ref([]);
// 下一个审批数据
const flowableTodoData = ref([]);
const procInsId = ref("");
const flowKeyValue=ref("");

// 高亮节点id
const hightlightId = ref("");
const taskId = ref("");
const isFullWidth = computed(() => {
  return route.query.workFlow === "1";
});

onMounted(() => {
  getDemandDetailsList();
  seachPersonsList();
  // 获取编辑数据
  if (route.query.workFlow == "1") {
    getEditNeedWork();
  }
});

// 点击岗位按钮
const btnJob = (index) => {
  jobIndex.value = index;
};

const seachPersonsList = async () => {
  // HR
  const res1 = await seachPersonList({
    roleKey: "HR",
  });
  if (res1.rows.length > 0) {
    res1.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      hrNameOptions.push({
        label,
        value,
      });
    });
  }
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      requireProposerOptions.push({
        label,
        value,
      });
    });
  }
};
const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();
  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};

const init = async (processId,flowKey) => {
  /**
   *  processId 流程实例id
      owner 指定人id
      role候选人id
      flowKey 流程key
   */
  let params = {
    owner: user.userId,
    role: user.userId,
    flowKey: flowKey,
  };

  try {
    // 留痕
    const recordRes = await flowableRecord({
      procInsId: processId,
      flowKey: flowKey,
    });
    if (recordRes.data.flowList.length > 0) {
      recordRes.data.flowList.sort((a, b) => {
        return Number(b.taskId) - Number(a.taskId) < 0;
      });
      flowableDataList.value = recordRes.data.flowList;
      console.log(flowableDataList.value, "flowableDataList.value");
      if (flowableDataList.value.length > 0) {
        nextTick(() => {
          let x = document.querySelectorAll(".el-step__icon-inner");
          x.forEach((item, index) => {
            item.innerHTML = x.length - index;
          });
        });
      }
    }
    console.log(processId, "processIdprocessIdprocessId");
    // 流程审批按钮
    const todoRes = await flowableTodo(processId, params);

    console.log(todoRes, "todoRestodoRes");
    if (todoRes.data.length > 0) {
      // 审批
      flowableBtns.value = JSON.parse(todoRes.data[0].description)[0].btns;

      flowableTodoData.value = todoRes.data[0];
      taskId.value = todoRes.data[0].taskId;
    }
  } catch (error) {
    console.error(error);
  }
};
const handleClick = (tab) => {
  if (tab.props.name == "流程图") {
    flowablePhoto({
      procInsId: procInsId.value,
      flowKey: flowKeyValue.value,
    }).then((res) => {
      flowDatas.value = res.data;
      hightlightId.value = res.data.nodeData[res.data.nodeData.length - 1].key;
    });
  }
};
// 审批方法
const approveGoto = (data, item) => {
  approveApi(data, item.btnUrl).then((res) => {
    if (res.code == 200) {
      ElMessage.success(`${item.btnName}成功`);
      handleClose();
    } else {
      ElMessage.error(`${item.btnName}失败`);
    }
  });
};

const handleSubmit = (parameter) => {
  console.log(parameter, "parameterparameter");
  let item = parameter.type;
  let comment = parameter.comment;

  console.log(item);
  console.log(comment, "审批意见");

  // 参数
  let data = {
    accessory: [],
    accessoryList: [],
    agencyId: item.agencyId ? item.agencyId : "",
    agencyNextrole: "",
    // 当前人
    // assignee: user.userId,

    assignee: user.userId && user.userId ? user.userId : null,
    // 审批意见
    auditOpinion: comment,
    // 当前时间
    auditTime: formatDate(new Date()).allDate,
    // 审批人 userName
    // auditUserName: user.userName,
    auditUserName: user.userName && user.userName ? user.userName : null,
    beAssigner: "",
    beAssignerName: "",
    beAssignerRole: "",
    // 按钮名
    btnName: item.btnName,
    // user buid

    buId: user.dept && user.dept.deptId ? user.dept.deptId : null,
    // buId: user.dept.deptId,
    // 按钮id
    id: query.value.id,
    messageId: "",
    nextBuCode: "",
    otherFiles: [],
    processInstanceId: flowableTodoData.value.processInstanceId,
    status: item.status,
    taskId: flowableTodoData.value.taskId,
    // 按钮 vars
    vars: item.btnValue ? item.btnValue : "",
    flowKey: "RECRUIT_DEMAND",
  };
  if (item.btnName == "保存") {
    console.log(data, "保存的data");
    console.log(item, "保存的item");
    approveGoto(data, item);
  } else {
    ElMessageBox.confirm(`是否要${item.btnName}这条用人需求申请审批?`, "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        console.log(item, "审批的data");
        console.log(item, "审批的item");

        approveGoto(data, item);
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "已取消",
        });
      });
  }
};
// 编辑数据
const getEditNeedWork = async () => {
  const res = await needWorkersView(query.value.id);
  Object.keys(res.data).forEach((item) => {
    if (res.data[item]) {
      neekWorksForm[item] = res.data[item];
    }
  });
  if (res.data.jobPostDetailVoList && res.data.jobPostDetailVoList.length > 0) {
    res.data.jobPostDetailVoList.sort((a, b) => {
      return a.id - b.id;
    });
    jobIndexList.value = [];
    neekWorksForm.jobPostDetailDtoList = toRef(res.data.jobPostDetailVoList);
    neekWorksForm.jobPostDetailDtoList.forEach((item, index) => {
      jobIndexList.value.push(index + 1);
    });
  }

  auditOpinion.value =
    res.data.reviewOpinionsList && res.data.reviewOpinionsList[0]
      ? res.data.reviewOpinionsList[0].opinionInfo
      : "";
  if (res.data.processId) {
    procInsId.value = res.data.processId;
    flowKeyValue.value=res.data.flowKey;

    init(res.data.processId,res.data.flowKey);
  }
};

/** 关闭按钮 */
const handleClose = () => {
  const obj = { path: "/recruitment/needWorkers" };
  proxy.$tab.closeOpenPage(obj);
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/btn.scss";

@import "@/assets/styles/form.scss";

.noclickjob {
  background: rgba(2, 123, 245, 0.466);
}

.clickjob {
  background: rgb(64, 158, 255);
}

.needNotesJob {
  .title_lineJob {
    display: flex;
    align-items: center;

    margin-bottom: 10px;

    .lineJob {
      width: 2px;
      height: 20px;
      background: rgba(245, 154, 35);
      margin-right: 10px;
    }

    .titleJob {
      font-size: 16px;
      font-weight: bold;
      color: rgb(102, 102, 102);
    }
  }

  .text {
    color: #fff;
    font-size: 13px;
    padding: 5px;
    height: 32px;
    width: 76px;
    line-height: 22px;
    border-radius: 4px;
    text-align: center;
  }

  .color1 {
    background: rgb(245, 154, 35);
  }

  .color2 {
    background: rgb(132, 0, 255);
  }

  .isNo {
    width: 43px;
    height: 28px;
    border-radius: 8px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
  }

  .isColor {
    background: rgb(107, 202, 0);
  }

  .noColor {
    background: rgb(250, 75, 81);
  }
}

:deep(.el-tabs) {
  height: 100%;
}

.demo-tabs {
  .step-content {
    border: 1px solid rgb(242, 242, 242);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 5px 15px;
    margin: 15px 0;

    .step-title {
      color: #000;
      font-size: 15px;
      font-weight: bold;
      border-bottom: 1px solid rgb(242, 242, 242);
      padding-bottom: 5px;
    }

    .user-time {
      color: #000;
      margin-top: 5px;
      font-size: 14px;

      .user {
        .name {
          font-weight: bold;
        }
      }

      .user,
      .time,
      .workText,
      .workBtn {
        margin: 10px 0;
      }

      .workBtn {
        display: flex;
        margin-top: 14px;
        justify-content: space-between;

        .el-button {
          margin-left: 8px !important;
          width: 74px;
        }

        .el-button:first-child {
          margin-left: 0 !important;
        }
      }
    }
  }
}

:deep(.el-form) {
  max-width: 100% !important;
  padding-left: 20px;
}

:deep(.el-step.is-vertical .el-step__line) {
  bottom: -25px;
  left: 11px;
  top: 15px;
  width: 2px;
}

.btn {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}

.tooltipText {
  padding: 5px;

  .textOne {
    font-size: 15px;
  }

  .textTwo {
    font-size: 14px;
    color: rgb(97, 97, 97);
    margin-top: 5px;
  }
}

.tags {
  width: 68px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  cursor: pointer;
}

.primaryTag {
  background: rgb(216, 235, 255);
  color: rgb(78, 174, 255);
  font-weight: bold;
}

.warningTag {
  background: rgb(253, 246, 236);
  color: rgb(231, 166, 68);
  font-weight: bold;
}

.dangerTag {
  background: rgb(254, 240, 240);
  color: rgb(245, 115, 115);
  font-weight: bold;
}

.normalTag {
  background: rgb(244, 244, 245);
  color: rgb(167, 169, 174);
  font-weight: bold;
}

.radios {
  height: 14px;
  width: 14px;
  background: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
  border: 1px solid #dcdfe6;
  border-radius: 100%;
  box-sizing: border-box;
  display: inline-block;
  /* height: var(--el-radio-input-height); */
  position: relative;
  cursor: pointer;
}

.noradios {
  height: 14px;
  width: 14px;
  background: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  border: 1px solid #dcdfe6;
  border-radius: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  /* height: var(--el-radio-input-height); */
  position: relative;
}

.radios:after {
  transform: translate(-50%, -50%) scale(1);
  background-color: white;
  border-radius: 100%;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  top: 50%;
  transition: transform 0.15s ease-in;
  width: 4px;
}

:deep(.el-form) {
  max-width: 100% !important;
  padding-left: 20px;
}

:deep(.el-input__wrapper, .el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-textarea__inner) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-select__suffix) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

:deep(.el-input.is-disabled) {
  cursor: auto;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

:deep(.el-date-editor.el-input) {
  width: 100% !important;
}
</style>
<style lang="scss">
// 提示气泡
.successTip.el-popper.is-dark {
  background-color: rgb(151, 250, 102);
  border: 1px solid rgb(151, 250, 102);
  color: #000;
}

// 三角形颜色
.successTip.el-popper.is-dark .el-popper__arrow:before {
  background-color: rgb(151, 250, 102);
  border: 1px solid rgb(151, 250, 102);
}

// 提示气泡
.warningTip.el-popper.is-dark {
  background-color: rgb(255, 232, 117);
  border: 1px solid rgb(255, 232, 117);
  color: #000;
}

// 三角形颜色
.warningTip.el-popper.is-dark .el-popper__arrow:before {
  background-color: rgb(255, 232, 117);
  border: 1px solid rgb(255, 232, 117);
}

.flowProcess {
  height: 100%;
}

.avatar-uploader-text {
  max-width: 180px; /* 设置最大宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */

  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.avatar-uploader-text:hover {
  text-decoration: underline;
}
.formLook.full-width {
  width: 100%; /* 全宽 */
}
</style>
